<template>
  <div class="app-container home flex-center">
    <div class="section" v-loading="loading">
      <div class="el-row-flex right">
        <el-button size="normal" @click="doEdit" v-if="!isEdit" :disabled="!isOk">编辑</el-button>
        <template v-else>
          <el-button size="normal" @click="doSave" :loading="editLoading" type="primary">保存</el-button>
          <el-button size="normal" @click="isEdit = false">取消</el-button>
        </template>
      </div>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">医院单位名称：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit" :title="info.orgName | getText">{{
                info.orgName | getText
              }}</span><el-input v-model="editData.orgName" size="normal" class="w-368" v-else
              placeholder="请输入医院单位名称" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">医院单位归属省：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit" :title="info.province | getText">{{
                info.province | getText
              }}</span><el-input v-model="editData.province" size="normal" class="w-368" v-else
              placeholder="请输入医院单位省" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">医院单位归属市：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit" :title="info.city | getText">{{
                info.city | getText
              }}</span><el-input v-model="editData.city" size="normal" class="w-368" v-else placeholder="请输入医院单位市" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">医院机构编码：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit" :title="info.orgCode | getText">{{
                info.orgCode | getText
              }}</span><el-input v-model="editData.orgCode" size="normal" class="w-368" v-else
              placeholder="请输入医院机构编码" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">死因系统ID：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit"
              :title="info.deathSystemAppid | getText">{{
                info.deathSystemAppid | getText
              }}</span><el-input v-model="editData.deathSystemAppid" size="normal" class="w-368" v-else
              placeholder="请输入死因系统AppID" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">死因系统密钥：</span>
            <template v-if="!isEdit">
              <span class="text-content single-line__ellipsis w-368" :title="info.deathSystemAppsecurity | getText">{{
                info.deathSystemAppsecurity | getText
                }}</span>
              <el-link :underline="false" icon="el-icon-document-copy"
                v-clipboard:copy="info.deathSystemAppsecurity | getText"
                v-clipboard:success="clipboardSuccess"></el-link>
            </template>
            <el-input v-model="editData.deathSystemAppsecurity" size="normal" class="w-368" v-else
              placeholder="请输入死因系统Appsecurity" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row-flex">
        <el-col :span="24">
          <div class="second-text"><span class="text-label">公卫科账号：</span><span
              class="text-content single-line__ellipsis w-368" v-if="!isEdit"
              :title="info.deathSystemLoginName | getText">{{
                info.deathSystemLoginName | getText
              }}</span><el-input v-model="editData.deathSystemLoginName" size="normal" class="w-368" v-else
              placeholder="请输入公卫科账号" />
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { editHospital, getHospital } from '@/api/record';
import { getExactType } from '@/utils';


export default {
  name: "RecordHospital",
  data() {
    return {
      loading: false,
      info: { orgName: null, province: null, city: null, orgCode: null, deathSystemAppid: null, deathSystemAppsecurity: null, deathSystemLoginName: null },
      editData: {},
      isEdit: false,
      editLoading: false,
      isOk: false,
    };
  },
  filters: {
    getText(value) {
      let type = getExactType(value);
      return ['null', 'undefined'].includes(type) ? '-' : value;
    },
  },
  created() {
    this.getInfo()
  },
  methods: {
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },
    async getInfo() {
      try {
        this.loading = true;
        this.isOk = false;
        const { data } = await getHospital()
        this.isOk = true;
        this.loading = false;
        if (!data) return;
        Object.keys(data).forEach(key => {
          this.$set(this.info, key, data[key])
        })
      } catch (error) {
        this.loading = false;
        this.isOk = false;
      }
    },
    doEdit() {
      Object.keys(this.info).forEach(key => {
        this.$set(this.editData, key, this.info[key])
      })
      this.isEdit = true;
    },
    async doSave() {
      try {
        this.editLoading = true;
        await editHospital(this.editData)
        this.$message.success('编辑成功')
        this.editLoading = false;
        this.isEdit = false;
        this.getInfo();
      } catch (error) {
        this.editLoading = false;
      }
    },
  }
};

</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f0f2f5;
  background-image: linear-gradient(154deg, rgba(7, 7, 9, 0.082) 30%, rgba(0, 107, 230, 0.3) 48%, rgba(7, 7, 9, 0.082) 64%);
  min-height: calc(100vh - 50px);
  position: relative;

  &.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .w-100 {
    width: 100px;
  }

  .w-150 {
    width: 150px;
  }

  .w-200 {
    width: 200px;
  }

  .w-368 {
    width: 368px;
  }

  .mt-24 {
    margin-top: 24px !important;
  }

  .mt-12 {
    margin-top: 12px !important;
  }


  .mt-32 {
    margin-top: 32px !important;
  }

  .section {
    padding: 24px;
    background-color: #ffffff;
    width: 624px;
    border-radius: 6px;

    &.mt-8 {
      margin-top: 8px;
    }
  }

  .text-label {
    width: 190px;
    display: inline-flex;
    justify-content: flex-end;
  }

  .text-content {
    border: 1px dashed #dcdfe6;
    display: inline-block;
    padding: 0 15px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .el-row-flex {

    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 40px;
    line-height: 40px;

    &.center {
      align-items: center;
    }

    &.end {
      align-items: flex-end;
    }

    &.right {
      justify-content: flex-end;
    }


    &:not(:first-child) {
      margin-top: 20px;
    }
  }

  .second-text {
    font-size: 18px;
    color: #333333;
    display: flex;
    align-items: center;
  }
}
</style>
